<template>
    <div>
        <h1>康复理疗列表</h1>
        项目名称:
        <input type="text" v-model="info.dname">
        <input type="button" class="btn btn-primary" value="查询" @click="show">
        <input type="button" class="btn btn-success" value="批量启用" @click="pl(1)">
        <input type="button" class="btn btn-danger" value="批量禁用" @click="pl(0)">
        <table class="table table-bordered">
            <tbody>
                <tr class="bg bg-success">
                    <td><input type="checkbox" v-model="checked" @click="allqx"></td>
                    <td>康复id</td>
                    <td>项目名称</td>
                    <td>项目编码</td>
                    <td>佣金</td>
                    <td>服务人数</td>
                    <td>服务时长</td>
                    <td>项目说明</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>
                <tr v-for="a in data.list">
                    <td><input type="checkbox" :value="a.did" v-model="ids" @change="checkedone"></td>
                    <td>{{ a.did }}</td>
                    <td>{{ a.dname }}</td>
                    <td>{{ a.dbm }}</td>
                    <td>{{ a.dmoney }}</td>
                    <td>{{ a.dnum }}</td>
                    <td>{{ a.dtime }}</td>
                    <td>{{ a.dsm }}</td>
                    <td>{{ a.dzt == 1 ? '启用' : '禁用' }}</td>
                    <td>
                        <input type="button" class="btn btn-danger" value="删除" @click="del(a.did)">
                    </td>
                </tr>
            </tbody>
        </table>
        <span>共<b>{{ data.num }}</b>数</span>
        <span>每页<b>{{ data.num }}</b>条</span>
        <span>共<b>{{ info.index }}/{{ data.page }}</b>页</span>
        <span><input type="button" value="首页" @click="fy(1)"></span>
        <span><input type="button" value="上一页" @click="fy(info.index - 1)"></span>
        <span v-for="item in data.page" @click="fy(item)">{{ item }}</span>
        <span><input type="button" value="下一页" @click="fy(info.index + 1)"></span>
        <span><input type="button" value="尾页" @click="fy(data.page)"></span>
    </div>
</template>

<script setup lang="ts">

import axios from 'axios'
import { ref, reactive, onMounted } from 'vue'
import moment from 'moment'
import 'bootstrap/dist/css/bootstrap.css'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter();
const route = useRoute();

let info: any = reactive({
    dname: "",
    index: 1,
    size: 2
})

let checked: any = ref(false);

let ids: any = ref([]);


let data: any = reactive({
    list: [],
    num: 0,
    page: 0,
})

onMounted(() => {
    show();
})

const allqx = () => {
    checked.value = !checked.value;
    if (checked.value == true) {
        ids.value = data.list.map((item: any) => {
            return item.did
        })
    }
    else {
        ids.value = []
    }
}

const checkedone = () => {
    if (ids.value.length == data.list.length) {
        checked.value = true;
    }
    else {
        checked.value = false;
    }
}


const fy = (e: any) => {
    if (e >= 1 && e <= data.page) {
        info.index = e;
        show();
    }
}

const pl = (start: any) => {
    if (ids.value.length == '') {
        alert('请至少选择一项');
        return;
    }
    else {
        if (confirm('确定批量修改吗')) {
            axios({
                url: '/api/Doctor/DelStart',
                method: 'put',
                params: {
                    ids: ids.value.toString(),
                    start: start
                }
            })
                .then(res => {
                    console.log(res);
                    if (res.data > 0) {
                        alert('批量修改成功！');
                        checked.value = false;
                        ids.value = [];
                        show();
                    }
                    else {
                        alert('批量修改失败！');
                        return;
                    }
                })
        }
    }
}
const show = () => {

    axios({
        url: '/api/Doctor/ShowDoctor',
        method: 'get',
        params: info
    })
        .then(res => {
            console.log(res);
            Object.assign(data, res.data)
        })
}

const del = (id: any) => {
    if (confirm('确定删除吗？')) {
        axios({
            url: '/api/Doctor/DelDoctor',
            method: 'delete',
            params: {
                id: id
            }
        })
            .then(res => {
                console.log(res);
                if (res.data > 0) {
                    alert('删除成功');
                    info.index = 1;
                    show();
                }
                else {
                    alert('删除失败');
                    return;
                }
            })
    }

}



</script>

<style scoped>
span {
    margin: 0 10px;
}

b {
    color: red;
}
</style>